import React, { useEffect, useState } from 'react'
import './App.css'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
// import { nanoid } from 'nanoid'

export default function App() {
  //在本地存储中查看是否保存有数据
  //副作用钩子
  //只在初始化时执行一次
  //先给一个初始值,在本地存储中查找有没有初始的数据,如果有,放在页面中
  //localStorage中储存的是字符串,所以需要转成数组
  let todoListInit = []
  useEffect(() => {
    console.log(2);
    // console.log(JSON.parse(localStorage.getItem('todoList')));
    setTodoList(JSON.parse(localStorage.getItem('todoList')) || [])
  }, [])


  console.log(1);
  const [todoList, setTodoList] = useState(

    // [{ id: nanoid(), todo: "唱", done: false },
    // { id: nanoid(), todo: "跳", done: false },
    // { id: nanoid(), todo: "rap", done: false },]
    todoListInit
  )

  //再设置一个副作用钩子,每当todoList变化就设置
  //把todoList设置到本地
  useEffect(() => {
    localStorage.setItem('todoList', JSON.stringify(todoList))
  }, [todoList])



  // console.log(todoList);
  //通常是给子组件传一个函数,在子组件中调用这个函数,参数传求出来的值,在父组件中的这个函数中添加state
  return (
    <div className="todo-container">
      <div className="todo-wrap">
        <Header setTodoList={setTodoList} todoList={todoList} />
        {/* 如果{...todoList},这样传是把这个数组展开传的,传过去的是一个对象,无法遍历 */}
        <List todoList={todoList} setTodoList={setTodoList} />
        <Footer todoList={todoList} setTodoList={setTodoList} />
      </div>
    </div>
  )
}
